<template>
    <div class="home">
        52-- {{ house }}
        <button @click="changeToy">修改child1的玩具</button>
        <button @click="changeComputer">修改child2的数据</button>
        <button @click="getAllChild($refs)">获取所有子组件</button>
        <PageDome52sub1 ref="c1"></PageDome52sub1>
        <PageDome52sub2 ref="c2"></PageDome52sub2>
    </div>
</template>


<script setup lang="ts" name="Page52">
import { ref, toRefs } from 'vue';
import PageDome52sub1 from './page/PageDome52sub1.vue';
import PageDome52sub2 from './page/PageDome52sub2.vue';

// 数据
let house = ref(4);
let c1 = ref();
let c2 = ref();
const changeToy = () => {
    console.log(c1.value)
    let { toy, book } = toRefs(c1.value)
    console.log(toy)
    console.log(book)
    toy.value = "小猪佩奇"

}
const changeComputer = () => {
    console.log(c2.value)
    let { computer, book } = toRefs(c2.value)
    computer.value = "神州"
}
const getAllChild = ($refs: any) => {
    console.log($refs)
    for (let key in $refs) {
        console.log($refs[key])
        $refs[key].book += 2
    }

}
defineExpose({ house })
</script>

<style lang="scss" scoped>
.home {
    margin-top: 20px;
    background-color: brown;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px black;
}
</style>